<template>
    <header id="header">
        <nav class="nav">
            <div
                class="nav-item"
                :class="{ active: route.path === '/realtime' }"
                @click="navLink('/realtime')"
            />
            <div class="nav-item" />
            <div
                class="nav-item"
                :class="{ active: route.path === '/greenwave' }"
                @click="navLink('/greenwave')"
            />
            <div
                class="nav-item"
                :class="{ active: route.path === '/cityroad' }"
                @click="navLink('/cityroad')"
            />
        </nav>
        <div class="right">
            <div class="alarm" @click="toggleCongestionAlarm">
                <img :src="alarmImg" alt="" />
                <span> 拥堵警报</span>
            </div>
            <div class="weather">多云</div>
            <div class="date">{{ date }}</div>
        </div>

        <AlarmsPanel />
    </header>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import dayjs from "dayjs";
// import refreshScale from "@/scale";
import { useDashboardStore } from "@/store/dashboard";
import alarmImg from "@/assets/dashboard/alarm@2x.png";

import AlarmsPanel from "./AlarmsPanel.vue";

const date = ref<any>(dayjs().format("YYYY年MM月DD日 HH:mm:ss"));
onMounted(() => {
    // refreshScale("header");
    setInterval(() => {
        date.value = dayjs().format("YYYY年MM月DD日 HH:mm:ss");
    }, 1000);
});
const route = useRoute();
const router = useRouter();
const navLink = (path: string) => {
    router.push(path);
};

const { toggleCongestionAlarm } = useDashboardStore();
</script>
<style scoped lang="scss">
header {
    height: $headerHeight;
    width: 100%;
    background-image: url(@/assets/bg_nav.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: transparent;
    display: flex;
    align-content: center;
    position: fixed;
    top: 0;
    z-index: 999;
    line-height: $headerHeight;
    .nav {
        display: flex;
        margin-left: 700px;
        .nav-item {
            &:first-of-type {
                width: 262px;
                height: 70px;
                background-image: url(@/assets/dashboard/nav_ss@2x.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                &.active {
                    background-image: url(@/assets/dashboard/nav_ss_active@2x.png);
                }
            }
            &:nth-of-type(2) {
                width: 262px;
                height: 70px;
                background-image: url(@/assets/dashboard/nav_lukou@2x.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: -88px;
                &.active {
                    background-image: url(@/assets/dashboard/nav_lukou_active@2x.png);
                }
            }
            &:nth-of-type(3) {
                width: 270px;
                height: 70px;
                background-image: url(@/assets/dashboard/nav_lvbo@2x.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: -96px;
                &.active {
                    background-image: url(@/assets/dashboard/nav_lvbo_active@2x.png);
                }
            }
            &:nth-of-type(4) {
                width: 270px;
                height: 70px;
                background-image: url(@/assets/dashboard/nav_city@2x.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-left: -96px;
                &.active {
                    background-image: url(@/assets/dashboard/nav_city_active@2x.png);
                }
            }
        }
    }
    .right {
        position: absolute;
        right: 20px;
        line-height: 80px;
        display: flex;
        height: 80px;
        .alarm {
            font-weight: 400;
            font-size: 16px;
            color: #56e5ff;
            display: flex;
            align-items: center;
            cursor: pointer;
            user-select: none;
            img {
                width: 22px;
                height: 18px;
                margin-top: -3px;
                margin-right: 5px;
            }
        }
        .weather {
            margin-right: 30px;
            margin-left: 30px;
            font-weight: 400;
            font-size: 16px;
            color: #c5fbff;
        }
        .date {
            font-weight: 400;
            font-size: 16px;
            width: 200px;
            color: #00edff;
        }
    }
}
</style>
